<!-- 轨迹回放 -->
<template>
    <div>
        <div id="container"></div>
        <div class="input-card">
            <h4 class="text-xl">轨迹回放控制</h4>
            <div class="input-item">
                <input type="button" class="btn" value="开始动画" id="start" @click="startAnimation()" />
                <input type="button" class="btn" value="暂停动画" id="pause" @click="pauseAnimation()" />
            </div>
            <div class="input-item">
                <input type="button" class="btn" value="继续动画" id="resume" @click="resumeAnimation()" />
                <input type="button" class="btn" value="停止动画" id="stop" @click="stopAnimation()" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted, ref } from "vue";


//@ts-ignore
window._AMapSecurityConfig = {
    securityJsCode: "98f6e3c83dd29c7fc45d942950db8ea9",//高德地图开发者密钥
};


//两条轨迹行动路线(总路线和未行驶路线)经纬度数据
var marker: any, lineArr = [[116.478935,39.997761],[121.473667, 31.230525], [100.301614, 25.678466], [107.237682, 34.362862], [91.118463, 29.654471], [117.018603, 32.585384]];
for (let i = 0; i < 50; i++) {
    lineArr.push([Math.round((Math.random() * (120 - 90) + 90) * 1000000) / 1000000, Math.round((Math.random() * (45 - 20) + 20) * 1000000) / 1000000]);
}


//地图实例
let map = ref()
//初始化地图
const initmap = () => {
    AMapLoader.load({
        key: "a48d7593c482f9c8b42b23ce5abd2201", //申请好的 Web 端开发者 Key，首次调用 load 时必填
        version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...']
    })
        .then((AMap) => {
            map.value = new AMap.Map("container", {
                viewMode: '3D', //默认使用 2D 模式
                zoom: 10, //初始化地图缩放级别
                mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
                center: [116.407387, 39.904179], //地图中心点
            }); //"container"为 <div> 容器的 id
            //缩放工具条
            AMap.plugin('AMap.ToolBar', () => {
                let toolbar = new AMap.ToolBar({
                    position: { left: '20px', bottom: "60px" }, //工具条位置
                }); //缩放工具条实例化
                map.value.addControl(toolbar); //添加控件
            });
            //比例尺插件
            map.value.plugin(["AMap.Scale"], () => {
                let scale = new AMap.Scale();
                map.value.addControl(scale);
            });
            //鹰眼插件
            map.value.plugin(["AMap.HawkEye"], () => {
                let hawkeye = new AMap.HawkEye();
                map.value.addControl(hawkeye);
            });
            //小转盘插件
            map.value.plugin(["AMap.ControlBar"], () => {
                let controlbar = new AMap.ControlBar();
                map.value.addControl(controlbar);
            });
            //导入AMap.MoveAnimation插件
            AMap.plugin('AMap.MoveAnimation', () => {
                marker = new AMap.Marker({//小汽车实例化
                    map: map.value,
                    position: [116.478935, 39.997761],//起始点
                    icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",//汽车图标
                    offset: new AMap.Pixel(-13, -26),//偏移量
                });
                // 绘制轨迹
                new AMap.Polyline({
                    map: map.value,
                    path: lineArr,
                    showDir: true,
                    strokeColor: "#28F",  //线颜色
                    // strokeOpacity: 1,     //线透明度
                    strokeWeight: 6,      //线宽
                    // strokeStyle: "solid"  //线样式
                });
                var passedPolyline = new AMap.Polyline({
                    map: map.value,
                    strokeColor: "#AF5",  //线颜色
                    strokeWeight: 6,      //线宽
                });
                marker.on('moving', (e: any) => {
                    passedPolyline.setPath(e.passedPath);
                    map.value.setCenter(e.target.getPosition(), true)
                });
                map.value.setFitView();
            })
        })
        .catch((e) => {
            console.log(e);
        });
}


//开始动画
const startAnimation = () => {
    marker.moveAlong(lineArr, {
        // 每一段的时长
        duration: 500,//可根据实际采集时间间隔设置
        // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
        autoRotation: true,
    });
};
//暂停动画
const pauseAnimation = () => {
    marker.pauseMove();
};
//继续动画
const resumeAnimation = () => {
    marker.resumeMove();
};
//停止动画
const stopAnimation = () => {
    marker.stopMove();
};


onMounted(() => {
    initmap(); // 初始化地图
    // 其他代码... // 如：添加地理位置标记、绘制路径、添加事件等... // 请自行根据实际需求编写代码并在此处添加。
})
</script>

<style scoped lang="less">
//引入高德地图样式
// @import url('https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css');//有bug
.input-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: .25rem;
    width: 22rem;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0.75rem 1.25rem;
}

.input-item {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 3rem;
}

.btn {
    border-radius: 10px;
    padding: 2px 7px;
    box-sizing: border-box;
    background-color: aquamarine;
}


#container {
    width: 100%;
    min-height: 530px;
    /* background-color: aquamarine; */
}

.input-card {
    width: 200px;
    height: 120px;
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
    top: 60px;
    right: 20px;
    z-index: 10;

}
</style>